<template>
  <el-dialog :modelValue="operatorConfigVisible" title="配置关联上下游参数" width="800" @close="buttonClick('confirm')">
    <div class="box">
      <el-button type="primary" size="small" @click="buttonClick('add')">添加</el-button>
      <div class="page-style">
        <el-pagination
          class="pagination"
          :total="total"
          layout="prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page="currentPage"
          @current-change="pageChange"
          @prev-click="pageChange"
          @next-click="pageChange"
        />
      </div>
      <div class="table-div">
        <el-table
          :key="tableKey"
          :data="tableData"
          border
          tooltip-effect="dark myTooltips"
          size="mini"
          height="450px"
          :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
        >
          <el-table-column
            v-for="(item, index) in title"
            :key="index"
            :formatter="item.formatter"
            :show-overflow-tooltip="true"
            :label="item.label"
            :width="item.width"
            header-align="center"
            :align="item.align"
            :prop="item.column_id"
          />
          <el-table-column label="操作" width="170" align="center">
            <template #default="scope">
              <el-button size="small" type="primary" link @click="buttonClick('update', scope.row)">修改</el-button>
              <el-button size="small" type="primary" link @click="buttonClick('delete', scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <button-group :button-array="buttonConf" align="right" @on-click="buttonClick($event)" />
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="buttonClick('confirm')"> 确认 </el-button>
      </div>
    </template>
    <AddAssociateRelation
      @handleEvent="handleEvent"
      :contextData="myContextData"
      :addAssociateRelationShow="addAssociateRelationShow"
      v-if="addAssociateRelationShow"
    />
  </el-dialog>
</template>

<script>
import AddAssociateRelation from './AddAssociateRelation';
import { getOperatorRelatedMap, deleteOperatorMapParameter } from '@/api/algorithmLibrary';
import { ElMessageBox } from 'element-plus';

export default {
  props: {
    contextData: {
      type: Object,
      default: () => ({})
    },
    operatorConfigVisible: {
      type: Boolean
    }
  },
  components: {
    AddAssociateRelation
  },
  data() {
    return {
      addAssociateRelationShow: false,
      total: 0,
      pagesize: 11,
      currentPage: 1,
      numOfColumn: 2,
      tableKey: 0,
      myContextData: {},
      title: [
        { label: 'field_id', column_id: 'fieldId', required: true, col: 2 },
        {
          label: 'related_operator_name',
          column_id: 'relatedOperatorName',
          required: true
        },
        {
          label: 'related_field_id',
          column_id: 'relatedFieldId',
          required: true
        }
      ],
      tableData: [],
      tableDataAll: [],
      // 当前算子id
      operatorRefId: null,
      // 当前分析id
      analysisRefId: null
    };
  },
  mounted() {
    this.analysisRefId = this.contextData.analysis_ref_id;
    this.operatorRefId = this.contextData.operator_ref_id;
    // 获取并装载算子参数配置
    this.getOperatorMapParameter();
  },
  methods: {
    // 右键选择算子以及配置算子mapping的回调
    handleEvent(event) {
      if (event.parms === 'add-relation-close') {
        if (event.name === 'submit') {
          this.getOperatorMapParameter();
        }
        this.addAssociateRelationShow = false;
      }
    },

    // 按钮触发事件
    buttonClick(id, scope) {
      if (id === 'search') {
      } else if (id === 'reset') {
      } else if (id === 'add') {
        this.myContextData = {
          analysis_ref_id: this.analysisRefId,
          operator_ref_id: this.operatorRefId
        };
        this.addAssociateRelationShow = true;
      } else if (id === 'confirm') {
        this.$emit('handle-event', { close: 'closeDiv', parms: 'close-config' });
      } else if (id === 'update') {
        this.myContextData = {
          data: scope,
          analysis_ref_id: this.analysisRefId,
          operator_ref_id: this.operatorRefId
        };
        this.addAssociateRelationShow = true;
      } else if (id === 'delete') {
        this.delete(scope);
      }
    },
    // 删除函数
    delete(data) {
      ElMessageBox.confirm('是否确认删除该项？', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAnalysisParameter(data);
      });
    },
    // 清空form值
    emptyFormData(data) {
      data.forEach((item) => {
        item.item.props.value = '';
      });
    },

    // 前端分页
    pageChange(page) {
      this.tableData = this.tableDataAll.slice((page - 1) * this.pagesize, page * this.pagesize);
    },

    // *******************************  接口  *****************************

    // 获取算子参数配置
    getOperatorMapParameter() {
      getOperatorRelatedMap({ operatorRefId: this.operatorRefId, analysisRefId: this.analysisRefId }).then((res) => {
        this.total = res.rows?.length || 0;
        this.tableDataAll = res.rows || [];
        this.tableData = this.tableDataAll.slice(0, this.pagesize) || [];
        this.currentPage = 1;
      });
    },

    // 删除映射关系
    deleteAnalysisParameter(data) {
      console.log(data);
      deleteOperatorMapParameter({ analysisRefId: this.analysisRefId, operatorRefId: this.operatorRefId, fieldId: data.fieldId }).then((res) => {
        this.$nextTick(() => {
          this.getOperatorMapParameter();
          this.tableKey++;
        });
      });
    }
  }
};
</script>

<style  lang="less" scoped>
// .query-form-dev {
//   border: 1px solid #e2e2e2;
//   padding: 10px;
//   overflow: auto;
// }
.pagination {
  padding: 0px;
}
.table-div {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid #e2e2e2;
  border-bottom: 0px;
}
.box {
  padding: 0px;
}
.action-button {
  margin-bottom: 10px;
}
// .form-button {
//   margin: 5px 0px 5px -15px;
// }
</style>
